<template>
  <div>
    <!-- 分享页 -->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      description="描述信息"
      :options="options"
      @select="onSelect"
    />
    <!-- 首页 -->
    <van-nav-bar title="商品名" left-arrow @click-left="onClickLeft" @click-right="showShare = true">
      <template #right>
          <van-icon name="share" size="18"/>
      </template>
    </van-nav-bar>
    <div>
      <van-tabs v-model="activeName">
        <div style="margin-top: 1vw;">
          <van-tab title="商品" name="a">
            <Swipe :swipe="swipe"/>
            <div>
              <van-row>
                <van-col span="6">span: 8</van-col>
                <van-col span="6">span: 8</van-col>
                <van-col span="6">span: 8</van-col>
                <van-col span="6">span: 8</van-col>
              </van-row>
            </div>
          </van-tab>
          <van-tab title="详细" name="b">内容 2</van-tab>
          <van-tab title="评分" name="c">
            <div class="van-hairline--surround" v-for="index in 4" :key="index">
              <van-cell :title="'用户名'+index" icon="http://q1.qlogo.cn/g?b=qq&nk=42964179&s=640" :label="'描述信息'+index">
                <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                <template #right-icon>
                  <van-rate value="2" readonly />
                </template>
              </van-cell>
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
    <div v-if="activeName=='a'" style="margin-top: 10vh">
      <van-goods-action class="van-hairline--top">
        <van-goods-action-icon icon="chat-o" text="客服" color="#07c160" />
        <van-goods-action-icon icon="cart-o" text="购物车" />
        <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
        <van-goods-action-button type="warning" text="加入购物车" />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import Swipe from '@/components/Vant/swipe.vue';

export default {
  components: {
    Swipe,
  },
  data() {
    return {
      value: '',
      activeName: '',
      loading: true,
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
      ],
      swipe: {
        indicator_color: 'white', // 指示器颜色
        autoplay: 5000, // 切换时间，单位毫秒
        // 图片样式
        image: {
          radius: 0, // 圆角半径
        },
        // 图片列表
        list: [
          {

          },
          {
            
          },
          {
            image: 'https://img.yzcdn.cn/vant/cat.jpeg',
          },
        ],
      },
    };
  },
  methods: {
    onClickLeft() {
      // 首页
      this.$router.push({ path: '/m/index' });
    },
    // 分享
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
  mounted() {
    // this.loading = true;
  },
};
</script>
